<!DOCTYPE html >
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="fragments/head::header"/>
<body class="no-skin">
    <div th:include="fragments/navbar::navbar"></div>
    <div class="main-container ace-save-state" id="main-container">
        <div th:include="fragments/left::left" id="sidebar" class="sidebar  responsive ace-save-state"></div>
        <div class="main-content">
            <div class="main-content-inner">
                <shiro:hasRole name="admin">
                    <input type="hidden" id = "input_hasRole_admin" value="1"/>
                </shiro:hasRole>
                <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                    <ul class="breadcrumb">
                        <li><i class="icon-home home-icon"></i><a href="/main">首页</a></li>
                        <li class="active">角色列表</li>
                    </ul>
                </div>
                <div class="page-content">
                    <div class="row">
                        <div class="row">
                            <div class="col-xs-12">
                                <h3 class="header smaller lighter blue">角色列表</h3>
                                <div>
                                    <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th class="hide">id</th>
                                            <th>角色名称</th>
                                            <th>创建时间</th>
                                            <th>更新时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div th:include="fragments/bottom::bottom"></div>
                </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/assets/js/jquery.validate.min.js}"></script>
    <script th:src="@{/assets/js/jquery.validate.zh-CN.js}"></script>
    <script th:src="@{/assets/js/jquery.dataTables.min.js}" type="text/javascript"></script>
    <script th:src="@{/assets/js/jquery.dataTables.bootstrap.js}" type="text/javascript"></script>
    <script th:src="@{/assets/js/dataTables.buttons.min.js}"></script>
    <!--<script th:src="@{/assets/js/dataTables.select.min.js}"></script>-->
    <script th:src="@{/assets/js/temp.js}" charset="UTF-8"></script>
    <script th:src="@{/assets/js/jquery-ui.custom.min.js}" charset="UTF-8"></script>
    <script th:src="@{/assets/js/spinbox.min.js}" charset="UTF-8"></script>
    <script th:src="@{/assets/js/date-time/moment.min.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            var pageHelper = (function () {
                this.editPermission = function (roleId) {
                    layer.open({
                        title: '编辑权限',
                        type: 2,
                        area: ['50%', '80%'],
                        fixed: false,
                        content: '/permission/edit/' + roleId
                    });
                }
                return {
                    init: function () {
                        this.getQueryData();
                        this.handelQueryData();
                        this.render();
                        this.addEvent();
                    },
                    getQueryData: function () {
                        this.oTable1;
                    },
                    handelQueryData: function () {

                    },
                    render: function () {
                        var _self = this;
                        _self.oTable1 = $('#dynamic-table').dataTable({
                            "bFilter" : false,// 是否使用搜索
                            "bProcessing" : true,// 载入数据时，是否显示‘进度’提示
                            "bDeferRender" : true,// 延期渲染，可以有个速度的提升
                            "sPaginationType" : "bs_normal",//分页样式 "full_numbers", //详细分页组，可以支持直接跳转到某页
                            "bRetrieve" : true,// 是否调用后台
                            "bServerSide" : true,// 是否以后台分页
                            "aLengthMenu" : [10, 20, 30], // 更改显示记录数选项
                            "iDisplayLength" : 10, // 默认显示的记录数
                            "bAutoWidth" : false, //是否自适应宽度
                            "sAjaxSource" : "/role/list/query",//请求路径
                            "bSort" : true, // 是否启动各个字段的排序功能
                            "select": {
                                style: 'multi'
                            },
                            "fnServerData" : function(sSource, aoData, fnCallback) {
                                $.ajax({
                                    "dataType" : 'json',
                                    "type" : "GET",
                                    "url" : sSource,
                                    "data" : aoData,
                                    "success" : fnCallback
                                });
                            },
                            "aaSorting" : [ [ 2, "asc" ] ],// 默认的排序方式,th和后端数据对应
                            "aoColumns" : [
                                {"sClass": "center", "bVisible": false, "bSearchable": false, "mData": "id"},
                                {"sClass": "center", "bSortable": false, "bSearchable":false ,"mData": "roleName"},
                                {"sClass": "center", "bSortable": false, "mData": "createTime",
                                    "mRender" : function(data, type, full, meta) {
                                        if (data != null) {
                                            return moment(data).format("YYYY-MM-DD");
                                        } else {
                                            return "";
                                        }
                                    }
                                },
                                {"sClass": "center", "bSortable": false, "mData": "updateTime",
                                    "mRender" : function(data, type, full, meta) {
                                        if (data != null) {
                                            return moment(data).format("YYYY-MM-DD");
                                        } else {
                                            return "";
                                        }
                                    }
                                },
                                {"sClass" : "center", "bSortable" : false, "mData" : function (data) {
                                        var styleDiv='<div class="hidden-sm hidden-xs action-buttons" style="cursor: pointer;">';
                                        var editHtml = '';
                                        if($("#input_hasRole_admin").val() == "1" ) {
                                            editHtml = "<a class='green' onclick='editPermission(" + data.id + ")'><i class='ace-icon fa fa-pencil bigger-130'></i></a>";
                                        }
                                        return styleDiv + editHtml + '</div>';
                                    }
                                }
                            ],
                            "oLanguage" : {
                                "sLengthMenu" : "每页 _MENU_条 ",
                                "sZeroRecords" : "对不起，查询不到任何相关数据",
                                "sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录 ",
                                "sInfoEmpty" : "显示 0 到 0 条，共 0 条记录",
                                "sInfoFiltered" : "数据表中共为 _MAX_ 条记录)",
                                "sProcessing" : "正在加载中...",
                                "sSearch" : "搜索",
                                "sUrl" : "",
                                "oPaginate" : {
                                    "sFirst" : "第一页",
                                    "sPrevious" : " 上一页 ",
                                    "sNext" : " 下一页 ",
                                    "sLast" : " 最后一页 "
                                }
                            }
                            //多语言配置
                        });
                    },
                    addEvent: function () {
                        var _self = this;
                    }
                }
            })();
            pageHelper.init();
        });
    </script>
</body>
</html>